<!--
 * @Description: 用户任务配置
 * @Author: DHL
 * @Date: 2022-08-04 10:41:36
 * @LastEditors: DHL
 * @LastEditTime: 2023-06-13 14:33:07
-->
<template>
  <div class="process-panel-tab__user-task">
    <el-divider />
    <div class="process-panel-tab__content-title">
      <div>
        <svg-icon className="process-icon" iconClass="appStoreFill"></svg-icon>
        <span>审批人</span>
      </div>
      <el-button type="primary" size="small" @click="handleOpen">
        <svg-icon className="process-icon" iconClass="plus"></svg-icon>
        审批人设置
      </el-button>
    </div>

    <div class="process-panel-tab__content-body">
      <el-tag size="large" v-if="approvalRules.assignedRules.type">
        {{ getManualApproval(approvalRules.assignedRules.type) }}
      </el-tag>
      <el-tag size="large" type="danger" v-if="approvalRules.multiInstanceRules.approvalWay">
        {{ getMultiWay(approvalRules.multiInstanceRules.approvalWay) }}
      </el-tag>
    </div>

    <UserTaskForm
      ref="userTaskFormRef"
      @submit="handleSubmit"
      :key="userTaskFormKey"
    ></UserTaskForm>
  </div>
</template>

<script setup lang="ts">
  import { cloneDeep, merge } from 'lodash-es'
  import { ApprovalRulesModel, TimeLimitRulesModel } from '../../../../model/approvalRulesModel'
  import { useBpmnStore } from '../../../../store/bpmn'
  import UserTaskForm from './userTaskForm.vue'
  import { UserModel } from '@/api/system/model/userModel'

  //////////////////////////////////////////////////
  // 属性
  //////////////////////////////////////////////////
  const bpmnStore = useBpmnStore()

  /**
   * 初始化审批规则
   */
  const defaultRules = {
    // 审批类型
    category: 'manualApproval',

    // 审批规则
    assignedRules: {
      type: '', // 审批人类型
      optionalWay: null, // 发起人自选方式
      assigneeList: [] as Array<UserModel>, // 审批用户集合
      postId: null, // 岗位主键
      levelChecked: false, // 是否勾选同时不超过发起人向上的层级
      level: null // 同时不超过发起人向上的层级
    },

    // 多人审批时采用的审批方式
    multiInstanceRules: {
      approvalWay: '' // 多人审批时采用的审批方式
    },

    // 审批超时限制规则
    timeLimitRules: {} as TimeLimitRulesModel
  }

  /**
   * 审批规则
   */
  const approvalRules = ref<ApprovalRulesModel>(cloneDeep(defaultRules))

  /**
   * 审批人表单
   */
  const userTaskFormRef = ref()
  const userTaskFormKey = ref(1)

  //////////////////////////////////////////////////
  // watch
  //////////////////////////////////////////////////
  watch(
    () => bpmnStore.activatedElementId,
    (newVal) => {
      if (newVal) {
        nextTick(() => {
          approvalRules.value = merge(cloneDeep(defaultRules), bpmnStore.getApprovalRules)
        })
      }
    },
    {
      immediate: true
    }
  )

  //////////////////////////////////////////////////
  // 函数
  //////////////////////////////////////////////////

  /**
   * 打开弹框
   */
  function handleOpen() {
    userTaskFormRef.value.handleOpen(approvalRules.value)
  }

  /**
   * 提交审批人设置
   */
  function handleSubmit(rules) {
    // 设置审批规则
    bpmnStore.setApprovalRules(rules)
    approvalRules.value = merge(cloneDeep(defaultRules), rules)
    userTaskFormKey.value++
  }

  /**
   * 获取审批规则
   * @param key
   */
  function getManualApproval(key: string) {
    const type = {
      specified: '指定成员',
      optional: '发起人自选',
      continuousMultistage: '连续多级主管',
      supervisor: '直属主管',
      initiator: '发起人自己'
    }

    return type[key]
  }

  /**
   * 获取多实例审批方式
   * @param key
   */
  function getMultiWay(key: string) {
    const type = {
      sequential: '依次审批',
      parallel: '会签（须所有审批人同意）',
      orSign: '或签（一名审批人同意或拒绝即可）'
    }

    return type[key]
  }
</script>

<style scoped lang="scss">
  .process-panel-tab__user-task {
    .process-panel-tab__content-body {
      margin: 10px 0px;

      .el-tag {
        margin-right: 10px;
      }
    }
  }
</style>
